<%@ page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-3.1.0.min.js"></script>

    <script>

        $(document).ready(function(){
 	
        	 $(".hideinfo").hide();
        	 $(".showWalletDetail").hide();
        	var userId=$("[userId]").attr("userId");
        	$.ajax({
        		type:"post",
        		url:"getBalance.action",
        		data:{userId:userId},
        		success:function(msg){
        			$("#balance").html(msg+"元");
        		}
        	});
            //显示收入支出
            var index=0;
            $("#s6").click(function(){
            	getwalletdetail;
            	if(index==0){
               	 	$("#a1").html("查看详细记录");
               		
               	 $(".showWalletDetail").show(500);
               	index=1;
            	}else if(index==1){
            		$("#a1").html("显示详细记录");
            		$(".showWalletDetail").hide(500);
            		index=2;
            	}else if(index==2){
            		index=1;
            		$("#a1").html("查看详细记录");
            		$(".showWalletDetail").show(500);
            	}
               
            
            });
            var getwalletdetail=$.ajax({
                type:"post",
                url:"getWalletDetail.action",
                data:{userId:userId},
                success:function(msg){
                	if(msg.split("[").length>1){
                    	var wallets=msg.split("[")[1].split("]")[0].split(",");
            			for(var i=0;i<wallets.length;i++){
                			var data=wallets[i].split("_"); 
                			var id=data[0];
                			var sum=data[1];
                			var type=data[2];
                			var date=data[3];
                			var money="+";
                			if(type==2){
                			 money="-";
                			}
                			   $("#tab").append("<tr style='text-align: center;'><td style='width:10%;'><input class='checked' type='checkbox' value='"+id+"'/></td><td style='width:45%;'>"+money+sum+"元</td><td style='width:45%'>"+date+"</td></tr>");
            			}
                	}else{
                		 $("#tab").append("<tr><td colspan='3' align='center''>"+msg+"</td></tr>");
                	}
                }
            });
            
            //全选中
            var i=1;
            $("#all").click(function(){
                if(i=="1"){
                    i++;
                    $("#all").prop({"checked":true});
                    $(".checked").each(function(){
                        $(this).prop({"checked":true});
                    });
                }
                else{
                    i--;
                    $("#all").prop({"checked":false});
                    $(".checked").each(function(){
                            $(this).prop({"checked":false});
                    });
                }
            });
            
          //删除所选项
            $("#delete").click(function(){
					if(confirm("确认要删除？")){
				          //传递删除的id数组
		                var str="";
		                if($(".checked:checked").length>0){
			            	 $(".checked:checked").each(function(){
			                       $(this).parent().parent().remove();
			                       var id=$(this).val();
			                       str=str+"_"+id;
			            	  });
			            	 $.ajax({
			                   	 type:"post",
			                   	 data:{str:str},
			                   	 url:"deleteWallet.action",
			                     success:function(msg){ 
			                      alert("删除成功!");
			                    }
			                });
		                }else{
		                	alert("请选择要删除的选项!");
		                }
					}
            });
          
          $("#a1").hover(function(){
        	 $(this).css("color","red");},function(){
        		 $(this).css("color","black");
          });
          
          var reg = /^[0-9]*$/;
          //充值
          $("#s3").click(function(){
        	  if($("#withdrawals").is(":visible")){
        		  $("#withdrawals").hide();
        	  } 
        	  if($("#accounts").is(":visible")){
        		  $("#accounts").hide();
        	  } 
        	  $("#recharge").show();
          });
        //确认充值
          $("#bt1").click(function(){
        	  if(confirm("确认要充值？")){
	    		  var sum=$("#rechargeSum").val();
	    		  if(sum==""){
	    				 alert("请输入充值金额！");	  
	    		  }else if(!reg.test(sum)){
	    			  alert("请输入数字！");
	    		  }else{
	    			  $.ajax({ 
	  	  	  			type:"post",
	  	  	  			url:"addbalance.action",
	  	  	  			data:{sum:sum},
	  	  	  			success:function(msg){
	  	  	  				var balance= parseInt($("#balance").html());
	  	  	  				balance=balance+parseInt(sum);
	  	  	  				$("#balance").html(balance+"元");
	  	  	  				$("#rechargeSum").val("");
	  	  	  				alert("充值成功！");
	  	  	  			}
	  	  	  		  });
	    			  $("#recharge").hide();
	    		  }
        	  }
    	  });
		  $("#bt2").click(function(){//取消
			  $("#recharge").hide();
    	  });
		  
          //提现
          $("#s4").click(function(){
        	  if($("#recharge").is(":visible")){
        		  $("#recharge").hide();
        	  } 
        	  if($("#accounts").is(":visible")){
        		  $("#accounts").hide();
        	  } 
        	  $("#withdrawals").show();
          });
          $("#bt3").click(function(){//确认提现
        	  if(confirm("确认要提现？")){
    		  var sum=$("#withdrawalsum").val();
    		  if(sum==""){
 				 alert("请输入提现金额！");
 		 	 }else if(!reg.test(sum)){
 			  	 alert("请输入数字！");
 		 	 }else{
	    	  	  $.ajax({
	    	  			type:"post",
	    	  			url:"withdrawals.action",
	    	  			data:{sum:sum},
	    	  			success:function(msg){
	    	  				if(msg=="fail"){
	    	  					alert("余额不足！");
	    	  				}else{
	    	  					var balance= parseInt($("#balance").html());
	    	  	  				balance=balance-parseInt(sum);
	    	  	  				$("#balance").html(balance+"元");
	    	  	  				$("#withdrawalsum").val("");
	    	  					alert("提现成功！");
	    	  				}
	    	  			}
	    	  	  });
    	  	  $("#withdrawals").hide();
 		 	}
        	  }
    	  });
		  $("#bt4").click(function(){//取消
			  $("#withdrawals").hide();
    	  });
          
          //转账
          $("#s5").click(function(){
        	  if($("#withdrawals").is(":visible")){
        		  $("#withdrawals").hide();
        	  } 
        	  if($("#recharge").is(":visible")){
        		  $("#recharge").hide();
        	  } 
        	  $("#accounts").show();
          });
          $("#bt5").click(function(){//确认转账
        	  if(confirm("确认要转账？")){
    		  var sum=$("#accountsum").val();
    		  var getUserId=$("#getUserId").val();
    		  $.ajax({
    	  			type:"post",
    	  			url:"sureUser.action",
    	  			data:{getUserId:getUserId},
    	  			success:function(msg){
    	  				if(msg=="success"){
    	  					 if(sum==""){
    	  		  				 alert("请输入转账金额！");
    	  		  		 	 }else if(!reg.test(sum)){
    	  		  			  	 alert("请输入数字！");
    	  		  		 	 }else{
    	  		  		 		$.ajax({
    	  		    	  			type:"post",
    	  		    	  			url:"accounts.action",
    	  		    	  			data:{sum:sum,getUserId:getUserId},
    	  		    	  			success:function(msg){
    	  		    	  				if(msg=="fail"){
    	  		    	  					alert("余额不足！");
    	  		    	  				}else{
    	  		    	  					var balance= parseInt($("#balance").html());
    	  		    	  	  				balance=balance-parseInt(sum);
    	  		    	  	  				$("#balance").html(balance+"元");
    	  		    	  	  				$("#accountsum").val("");
    	  		    	  					alert("转账成功！");
    	  		    	  				}
    	  		    	  			}
    	  		    	  	  });
    	  		    	  	  $("#accounts").hide();
    	  		  		 	 }
    	  				}else{
    	  					alert("该用户不存在！");
    	  				}
    	  			}
    	  	  });
    		 
        	  }
    	  });
		  $("#bt6").click(function(){//取消
			  $("#accounts").hide();
    	  });
          
        });
    </script>
<style>

.color{color:black;}
 a{text-decoration: none;}
span{position: absolute;color: black;}
#s1{
    left: 60px;top: 45px;color: black;
}
#s2{
    left: 80px;top: 255px;
}
#balance{
	left: 130px;top: 255px;
}
#s3{
    left: 65px;top: 320px;width:75px;height:34px;text-align:center;line-height:34px;background-color:#01B1ED;
}
#s4{
    left: 147px;top: 320px;width:76px;height:34px;text-align:center;line-height:34px;background-color:#01B1ED;
}
#s5{
      left:230px;top: 320px;width:77px;height:34px;text-align:center;line-height:34px;background-color:#01B1ED;
  }
#s6{
    left:240px;top:180px;font-size:12px;
}
#s7{
   left: 180px;top: 45px;
}
#t1{background-image:url("../img/");height:200px;background-repeat:no-repeat;background-size:cover;}
.showWalletDetail{position: absolute;left: 385px; top:18px;width:680px;background-color:#F6F7FB;border:2px solid #E3E3E1;}
#delete{float:right;margin-top:50px;margin-bottom:30px;margin-right:50px;}
#backimg{background-image:url("../img/wallet.jpg");height:450px;width:325px;background-repeat:no-repeat;background-size:cover;margin-left:15px;}
.checked{margin-left:35px}
#recharge{position: absolute;left: 355px; top:140px;width:280;height:150px;border:2px solid black;border-radius:5px;}
#withdrawals{position: absolute;left: 355px; top:140px;width:280;height:150px;border:2px solid black;border-radius:5px;}
#accounts{position: absolute;left: 355px; top:100px;width:280;height:210px;border:2px solid black;border-radius:5px;} 
td{border-bottom:1px solid #E3E3E1;height:30px;}
.div1{width:280px;background-color:#D2DCA4;height:35px;border-top-right-radius:5px;border-top-left-radius:5px;}
.div1_01{font-size :13px;line-height:35px;margin-left:20px;}
.div2{margin-left:70px;font-size :13px;margin-top:10px;}
.div3{margin-left:70px;margin-top:10px;}
.hideinfo{width:280px;background-color:white;}
input button{margin-left:20px;}


    </style>
</head>
<body>	
	<div id="backimg">
        <div id="d1"><span id="s1"> <img src="../uImg/${user.userId}.jpg" style="width:100px;height:100px;"></span>
        	<span id="s7">${user.detailUser.nickName}</span></div>
        <div id="d2"><span id="s2">余额：</span> <span id="balance"></span>
            <span id="s6"><a  id="a1" href="#" userId="${user.detailUser.userId}">查看收入支出</a></span>
        </div>
        <div id="d3">
            <span id="s3"><a href="#">充值</a></span>
            <span id="s4"><a href="#">提现</a></span>
            <span id="s5"><a href="#">转账</a></span>
        </div>
        <div class="showWalletDetail">
            <table id="tab" style="width:680px;" cellspacing="0px">
                <tr  style="text-align: center;height:50px;font-weight: bold">
                    <td style="width:10%;">全选<input type="checkbox" id="all"/></td>
                    <td style="width:45%;">收入支出</td>
                    <td style="width:45%;">日期</td>
                </tr>
            </table>
         	<input id="delete" type="button" value="删除所选项"/>
        </div>
	</div>
	<div  class="hideinfo" id="recharge" >
		<div class="div1"><div class="div1_01">我的钱包    > 充值<a href="#" id="bt2" style="margin-left:145px;font-size:17px;width:35px;">x</a></div></div>
		<div class="div2">充值金额：</div>
		<div class="div3"><input type="text" id="rechargeSum"/><br/></div>
		<div class="div3"><input type="button" id="bt1" value="充值" style="width:75px;"/></div>
		
	</div>
	
	<div class="hideinfo" id="withdrawals">
		<div class="div1"><div class="div1_01">我的钱包    > 提现<a href="#" id="bt4" style="margin-left:145px;font-size:17px;width:35px;">x</a></div></div>
		<div class="div2">提现金额：</div><div class="div3"><input type="text" id="withdrawalsum"/></div>
		<div class="div3"><input type="button" id="bt3" value="提现" style="width:75px;"/></div>
		
	</div>
	
	<div class="hideinfo" id="accounts">
		<div class="div1"><div class="div1_01">我的钱包    > 转账<a href="#" id="bt6" style="margin-left:145px;font-size:17px;width:35px;">x</a></div></div>
		<div class="div2">对方账户：</div><div class="div3"><input type="text" id="getUserId"/></div>
		<div class="div2">转账金额：</div><div class="div3"><input type="text" id="accountsum"/></div>
		<div class="div3"><input type="button" id="bt5" value="转账" style="width:75px;"/></div>
	</div>
</body>
</html>